<template>
 <div>
   <div style="text-align: center;margin-bottom: 20px">
     <Icon size="30" type="md-print" color="#2d8cf0" v-print="'#printTest'"/>
   </div>
   <Card>
     <div id="printTest">
       <table id="customers">
         <tr>
           <th>Company</th>
           <th>Contact</th>
           <th>Country</th>
           <th>Country</th>
           <th>Country</th>
           <th>Country</th>
           <th>Country</th>
         </tr>

         <tr>
           <td>Apple</td>
           <td>Steven Jobs</td>
           <td>USA</td>
         </tr>

         <tr class="alt">
           <td>Baidu</td>
           <td>Li YanHong</td>
           <td>China</td>
         </tr>

         <tr>
           <td>Google</td>
           <td>Larry Page</td>
           <td>USA</td>
         </tr>

         <tr class="alt">
           <td>Lenovo</td>
           <td>Liu Chuanzhi</td>
           <td>China</td>
         </tr>

         <tr>
           <td>Microsoft</td>
           <td>Bill Gates</td>
           <td>USA</td>
         </tr>

         <tr class="alt">
           <td>Nokia</td>
           <td>Stephen Elop</td>
           <td>Finland</td>
         </tr>
       </table>
       <slot name="content"></slot>
     </div>
   </Card>
 </div>
</template>

<script>
export default {
  name: 'print'
}
</script>

<style scoped>
  #customers
  {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    width:100%;
    border-collapse:collapse;
  }

  #customers td, #customers th
  {
    font-size:1em;
    border:1px solid #98bf21;
    padding:3px 7px 2px 7px;
  }

  #customers th
  {
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#A7C942;
    color:#ffffff;
  }

  #customers tr.alt td
  {
    color:#000000;
    background-color:#EAF2D3;
  }
</style>
